<template>
  <div class="node-panel">
    <div class="node-item" @mousedown="openSelection()">
      <div 
        class="node-item-icon" 
        :style="{ backgroundImage: `url(${iconUrls.selection})` }"
      ></div>
      <span class="node-label">选区</span>
    </div>
    <div class="node-item" @mousedown="addStartNode()">
      <div 
        class="node-item-icon" 
        :style="{ backgroundImage: `url(${iconUrls.start})` }"
      ></div>
      <span class="node-label">开始节点</span>
    </div>
    <div class="node-item" @mousedown="addGeneralNode()">
      <div 
        class="node-item-icon" 
        :style="{ backgroundImage: `url(${iconUrls.general})` }"
      ></div>
      <span class="node-label">普通节点</span>
    </div>
    <div class="node-item" @mousedown="addConditionNode()">
      <div 
        class="node-item-icon" 
        :style="{ backgroundImage: `url(${iconUrls.condition})` }"
      ></div>
      <span class="node-label">条件节点</span>
    </div>
    <div class="node-item" @mousedown="addHtmlNode()">
      <div 
        class="node-item-icon" 
        :style="{ backgroundImage: `url(${iconUrls.html})` }"
      ></div>
      <span class="node-label">Html节点</span>
    </div>
    <div class="node-item" @mousedown="addEndNode()">
      <div 
        class="node-item-icon" 
        :style="{ backgroundImage: `url(${iconUrls.end})` }"
      ></div>
      <span class="node-label">结束节点</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, computed } from 'vue';
import LogicFlow from "@logicflow/core";
//注册节点
import CustomRect from "../registerNode/CustomRect";
import CustomPolygon from "../registerNode/CustomPolygon";
import CustomStart from "../registerNode/CustomStart";
import CustomEnd from "../registerNode/CustomEnd";
import CustomHtml from "../registerNode/CustomHtml";

//UI组件
import { ElMessage } from "element-plus";
import { getImageUrl } from "@/Http/http";

// 定义 props
interface Props {
  lf: LogicFlow;
}

const props = defineProps<Props>();

// 默认base64图片作为后备
const defaultIcons = {
  selection: '',
  start: '',
  general: '',
  condition: '',
  html: '',
  end: ''
};

// 图片URL计算 - 直接使用base64图片作为默认值
const iconUrls = computed(() => {
  return {
    selection: defaultIcons.selection,
    start: defaultIcons.start,
    general: defaultIcons.general,
    condition: defaultIcons.condition,
    html: defaultIcons.html,
    end: defaultIcons.end
  };
});

// 方法定义
const registerNode = () => {
  const lf = props.lf;
  lf.register(CustomRect);
  lf.register(CustomPolygon);
  lf.register(CustomStart);
  lf.register(CustomEnd);
  lf.register(CustomHtml);

  //注册非业务事件，业务事件需要放在上一层
  lf.on("connection:not-allowed", (data: any) => {
    ElMessage({
      type: "error",
      message: data.msg,
    });
  });

  lf.on("custom:button-click", (model: any) => {
    // console.log('custom:button-click')
    lf.setProperties(model.id, {
      body: "LogicFlow",
    });
  });
};

const openSelection = () => {
  props.lf.updateEditConfig({
    stopMoveGraph: true,
  });
};

const addStartNode = () => {
  props.lf.dnd.startDrag({
    type: "CustomStart",
    text: "开始",
    properties: { start: "开始" }, //自定义属性，同时导出的文件节点属性上会生成
  });
};

const addGeneralNode = () => {
  props.lf.dnd.startDrag({
    type: "CustomRect",
    text: "普通节点",
    properties: { CustomRect: "矩形", PropValue: '' }, //自定义属性，同时导出的文件节点属性上会生成
  });
};

const addConditionNode = () => {
  props.lf.dnd.startDrag({
    type: "CustomaPolygon",
    text: "条件节点",
  });
};

const addHtmlNode = () => {
  props.lf.dnd.startDrag({
    type: "CustomHtml",
    text: "",
    properties: { text: "点击修改标题" },
  });
};

const addEndNode = () => {
  props.lf.dnd.startDrag({
    type: "CustomEnd",
    text: "结束节点",
  });
};

// 生命周期
onMounted(() => {
  //框选使用
  const lf = props.lf;
  lf &&
    lf.on("selection:selected", () => {
      lf.updateEditConfig({
        stopMoveGraph: false,
      });
    });
  //注册节点
  registerNode();
});
</script>
<style>
.node-panel {
  position: absolute;
  top: 100px;
  left: 10px;
  width: 50px;
  padding: 10px;
  background-color: white;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  border-radius: 6px;
  text-align: center;
  z-index: 101;
}
.node-item {
  margin-bottom: 10px;
}
.node-item-icon {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: grab;
}
.node-label {
  font-size: 12px;
  margin-top: 5px;
  user-select: none;
}


/*******************纯html格式的样式****************/

.lf-html-wrapper {
  width:100px;
  height:100px;
}
.lf-html-wrapper .custom-html {
  width:96px;
  height:96px;
  border:2px solid #2987ff;
}

.lf-html-wrapper .custom-head {
  color:red;
  height:26px;
  line-height:26px;
}

.lf-html-wrapper .custom-body {
  color:#2987ff;
  height:50px;
  line-height:50px;
}


</style>
